import Scene from './scene'
import BackGround from '../runtime/background'
import Sprite from '../base/sprite'

const screenWidth = window.innerWidth
const screenHeight = window.innerHeight

export default class startScene extends Scene {
  constructor(aParent) {
    super(aParent)
    this.bg = new BackGround.starting()
    this.bindStartGame = this.startGame.bind(this)
        /*let button = wx.createUserInfoButton({
      type: 'text',
      text: '练习赛',
      style: {
        left: screenWidth * 0.5 - 100,
        top: screenHeight - 120,
        width: 200,
        height: 50,
        lineHeight: 40,
        backgroundColor: '#ff0000',
        color: '#ffffff',
        textAlign: 'center',
        fontSize: 24,
        borderRadius: 4
      }
    })
    button.onTap((res) => {
      console.log(res)
    })*/
    this.train_btn = new Sprite("images/astray/buttons.png", screenWidth * 0.6, screenHeight * 0.08, screenWidth * 0.2, screenHeight * 0.72, 2,
    {sx: 28, sy: 38, sw: 200, sh: 170, texts: [{value: "练习赛", font: screenHeight * 0.04 + 'px Arial', pos: [screenWidth * 0.18, screenHeight * 0.05], color: "#ffffff"}]}, "train")
    this.match_btn = new Sprite("images/astray/buttons.png", screenWidth * 0.6, screenHeight * 0.08, screenWidth * 0.2, screenHeight * 0.81, 2,
    {sx: 250, sy: 36, sw: 200, sh: 170, texts: [{value: "竞技赛", font: screenHeight * 0.04 + 'px Arial', pos: [screenWidth * 0.18, screenHeight * 0.05], color: "#ffffff"}]}, "match")
    this.shop_btn = new Sprite("images/astray/buttons.png", screenWidth * 0.6, screenHeight * 0.08, screenWidth * 0.2, screenHeight * 0.9, 2,
    {sx: 470, sy: 36, sw: 200, sh: 170, texts: [{value: "商店", font: screenHeight * 0.04 + 'px Arial', pos: [screenWidth * 0.23, screenHeight * 0.05], color: "#ffffff"}]}, "shop")
  }
  update(){
    return Scene.prototype.update.apply(this, arguments)
  }
  render(ctx){
    Scene.prototype.render.apply(this, arguments)
    this.bg.render(ctx)
    this.train_btn.drawToCanvas(ctx)
    this.match_btn.drawToCanvas(ctx)
    this.shop_btn.drawToCanvas(ctx)
    ctx.update()
  }

  startGame(e){
    e.preventDefault()
    const x = e.touches[0].clientX
    const y = e.touches[0].clientY
    if (this.train_btn.pointIsIn(x , y)){
      this.toNextScene("loading")
    }else if (this.match_btn.pointIsIn(x, y)){
      this.toNextScene("loading2")
    }else if (this.shop_btn.pointIsIn(x, y)){
      this.toNextScene("shop")
    }
  }

  enter(){
    Scene.prototype.enter.apply(this, arguments)
    canvas.addEventListener('touchstart', this.bindStartGame)
  }

  leave(){
    canvas.removeEventListener('touchstart', this.bindStartGame)
  }
}